import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaTop, WeaTab, WeaRightMenu, WeaFormItem, WeaSearchGroup, WeaDialog, WeaPopoverHrm, WeaLocaleProvider } from 'ecCom';
import { Button, Form } from 'antd';
import { WeaTableNew, WeaSwitch } from 'comsMobx';

const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

@inject('votingMyVoting')
@observer
class MyVoting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
    this.onChange = this.onChange.bind(this)
  }
  componentDidMount() {
    const { doInit, form } = this.props.votingMyVoting;
    // form.initFormFields(conditioninfo);
    doInit(conditioninfo => form.basic.initFormFields(conditioninfo));
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.location.key !== nextProps.location.key) {
      const { doInit, form } = this.props.votingMyVoting;
      doInit();
    }
  }

  componentWillUnmount() {
		// 组件卸载时一般清理一些状态
		const { setShowSearchAd, form } = this.props.votingMyVoting;
		setShowSearchAd(false);
		form.basic.resetForm();
	}

  render() {
    let { status, setShowSearchAd, doSearch, comsWeaTableStore, form, setCustomDialog } = this.props.votingMyVoting;
    let { showSearchAd, allSessionkey, groupinfo, selectedGroup, loading,
      customDialog, votingDialogId, joinType, tabkey,
    } = toJS(status);
    let showSearchAdBasic = showSearchAd ? showSearchAd.basic : false;
    let topTab = groupinfo;
    let customDialogIframeSrc = joinType == 'hasJoin'
      ? `/voting/surveydesign/pages/mysurveyinput.jsp?votingid=${votingDialogId}`
      : `/voting/VotingPoll.jsp?votingid=${votingDialogId}`;


    return (
      <div className="votingList" >
        <div style={{ width: '100%' }}>
					<WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@9wyncp`} />
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@11aaua`}
            datas={this.getRightMenu()}
            onClick={this.onRightMenuClick.bind(this)}
            collectParams={{
              favname: getLabel(33831, '参与调查'),
              favouritetype: 2,
              objid: 0,
              importantlevel: 1,
              link: 'wui/index.html#/main/voting/myVoting',
            }}
          >
            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@hphwal`}
              loading={loading}
              icon={<i className="icon-coms-investigate" />}
              iconBgcolor="#6D3CF7"
              title={getLabel(33831, '参与调查')}
              buttons={[]}
              showDropIcon={true}
              dropMenuDatas={this.getRightMenu()}
              dropMenuProps={{
                collectParams: {
                  favname: getLabel(33831, '参与调查'),
                  favouritetype: 2,
                  objid: 0,
                  importantlevel: 1,
                  link: 'wui/index.html#/main/voting/myVoting',
                },
              }}
              onDropMenuClick={this.onRightMenuClick.bind(this)}
            >
              <div style={{ overflow: 'hidden', height: '100%' }}>
                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@ti36m9`}
                  datas={topTab}
                  keyParam="viewcondition" // 主键
                  countParam="groupid" // 数量
                  selectedKey={selectedGroup}
                  onChange={this.changeTab}
                  buttonsAd={this.getTabButtonsAd()}
                  searchType={['base', 'advanced']}
                  searchsBaseValue={form.basic.getFormParams().subject}
                  setShowSearchAd={bool => setShowSearchAd(bool, 'basic')}// 显示高级搜索
                  hideSearchAd={() => setShowSearchAd(false, 'basic')}// 隐藏高级搜索
                  searchsAd={<Form ecId={`${this && this.props && this.props.ecId || ''}_Form@ynuc2s`} horizontal>{this.getSearchs(true)}</Form>}// 高级搜索里面的内容
                  showSearchAd={showSearchAdBasic}// 是否显示高级搜索
                  onSearch={(v) => {
                    doSearch({ listType: 'myVoting', viewcondition: tabkey, subject: v });
                  }
                  }
                  onSearchChange={(v) => {
                    form.basic.updateFields({
                      subject: {
                        value: v,
                      },
                    });
                  }}
                />
                {comsWeaTableStore.basic &&
                  <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@h1vmsq`}
                    hasOrder={true}
                    needScroll={true}
                    sessionkey={allSessionkey.basic}
                    comsWeaTableStore={comsWeaTableStore.basic}
                    getColumns={this.getColumns}
                  />
                }
              </div>
            </WeaTop>
          </WeaRightMenu>

          {
            customDialog && <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@4yokx4`}
              visible={customDialog}
              title={getLabel('33832', '调查表')}
              className="votingcustomDialog"
              icon="icon-coms-investigate"
              iconBgcolor="#6D3CF7"
              style={{ width: 890, height: 540 }}
              buttons={[]}
              onCancel={() => { setCustomDialog(false); }}
            >

              <iframe
                style={{ height: '100%', width: '100%' }}
                src={customDialogIframeSrc}
              />

            </WeaDialog>
          }
        </div>


      </div>

    );
  }

  getColumns = (e) => {
    let { status, form, setCustomDialog } = this.props.votingMyVoting;
    let { selectedGroup } = toJS(status);
    let joinType = selectedGroup == '1' ? 'hasJoin' : 'noJoin';
    let newColumns = '';
    newColumns = e.map((column) => {
      let newColumn = { ...column };
      if (newColumn.dataIndex == 'subject' || newColumn.dataIndex == 'id') {
        newColumn.render = (text, record, index) => { // 前端元素转义
          let valueSpan = record[`${newColumn.dataIndex}span`] !== undefined ? record[`${newColumn.dataIndex}span`] : record[newColumn.dataIndex];
          return (
            <div className="wea-votinglist-canClick wea-url-name"
              style={{ cursor: 'pointer' }}
              dangerouslySetInnerHTML={{ __html: valueSpan }}
              onClick={() => {
              setCustomDialog(true, joinType, record.id);
            }}
            />
          );
        };
        return newColumn;
      }
        return newColumn;
    });
    return newColumns;
  }

  changeTab = (key) => {
    let { status, changeTabKey, form } = this.props.votingMyVoting;
    changeTabKey(key);
    form.basic.resetForm();
  }

  // 右键菜单
  getRightMenu = () => {
    const { status } = this.props.votingMyVoting;
    const { rightMenuDatas } = toJS(status);
    let btns = [];
    if (rightMenuDatas.length !== 0) {
      rightMenuDatas.map((item) => {
        item.type !== 'BTN_STORE' && item.type !== 'BTN_HELP' && btns.push({
          key: item.type,
          icon: <i className={item.menuIcon} />,
          content: item.menuName,
        });
      });
    }
    return btns;
  }

  onRightMenuClick = (key) => {
    const { status, form, doSearch } = this.props.votingMyVoting;
    const tabkey = status.tabkey;
    if (key == 'BTN_SEARCH') { // 搜索
      const params = form.basic.getFormParams();
      doSearch({ ...params, listType: 'myVoting', viewcondition: tabkey });
    }
  }

  onEnterSearch = () => {
    let { status, form, doSearch } = this.props.votingMyVoting;
    const params = form.basic.getFormParams();
    const tabkey = status.tabkey;

    doSearch({ ...params, listType: 'myVoting', viewcondition: tabkey })
  }
  getSearchs = () => {
    // let conditioninfo = [];
    let { status, form } = this.props.votingMyVoting;
    let { conditions } = toJS(status);
    let conditioninfo = conditions.basic ? conditions.basic : [];
    const { isFormInit } = form.basic;
    let group = [];
    isFormInit && conditioninfo.map((c, i) => {
      let items = [];
      c.items.map((field, index) => {
        items.push({
          com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@wdn070@${(field.domkey && field.domkey[0]) ? field.domkey[0] : `wdn070${index}`}`}
            label={`${field.label}`}
            labelCol={{ span: `${field.labelcol}` }}
            wrapperCol={{ span: `${field.fieldcol}` }}
          >
            <WeaSwitch
              ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@w22yzg@${(field.domkey && field.domkey[0]) ? field.domkey[0] : `w22yzg${index}`}`}
              fieldConfig={field} form={form.basic}
              onChange={this.onChange}
              onEnterSearch={this.onEnterSearch}
            />
          </WeaFormItem>),
          colSpan: 1,
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@zt7wvv@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />);
    });
    return group;
  }

  onChange = () => {

  }

  getTabButtonsAd = () => {
    const { setShowSearchAd, form, doSearch, status } = this.props.votingMyVoting;
    const params = form.basic.getFormParams();
    const tabkey = status.tabkey;
    return [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@npzpn9@$searchBtn`} type="primary" onClick={() => { doSearch({ ...params, listType: 'myVoting', viewcondition: tabkey }); }}>{getLabel(197, '搜索')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jud26b@$resetBtn`} type="ghost" onClick={() => { form.basic.reset(); }}>{getLabel(2022, '重置')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@aljx7p@$closeBtn`} type="ghost" onClick={() => { setShowSearchAd(false, 'basic'); }}>{getLabel(31129, '取消')}</Button>),
    ];
  }
}

export default MyVoting;
